<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>押金结算列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js" ></script>
		<script type="text/javascript" src="../js/config.js" ></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<style type="text/css">
			.mui-content>.mui-table-view:first-child {
				margin-top: -1px;
			}
		</style>
	</head>
	<style>
		.mui-media-body {
			position: relative;
		}
		
		.logo {
			margin-top: 40px;
		}
		
		.go_jiesuan {
			position: absolute;
			right: 10px;
			top: 50%;
			font-size: 14px;
			color: green;
		}
		
		#jiesuan .mui-table-view-cell {
			padding: 10px 0; 
		}
		.transformDown{
			/*transform: rotate(90deg);*/
		}
		.bg{
			display: none;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 50;
			margin-top: 44px;
			background: rgba(0,0,0,0.2); 
		}
		.function .mui-table-view-cell{
			padding: 5px 8px;
		}
		.classify{
			line-height: 44px;
			color: #000;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">押金结算列表</h1>
			<a class="mui-pull-right classify re">筛选</a>
		</header>
		<div class="bg">
			<ul class="mui-table-view function">
				<li class="mui-table-view-cell" data-pay-statys = '1' data-url="loadSearch.html" data-id="loadSearch.html">
					<a class="mui-navigate-right">
						<span>可结算订单</span>
					</a>
				</li>
				<li class="mui-table-view-cell" data-pay-statys = '1' data-title='即将过期订单' data-url="waitCheckOut.html" data-id="waitCheckOut.html">
					<a class="mui-navigate-right">
						<span>即将过期订单</span>
					</a>
				</li>
				<li class="mui-table-view-cell" data-pay-statys = '2' data-title='已过期结算订单'  data-url="overTimeOrders.html" data-id="overTimeOrders.html">
					<a class="mui-navigate-right">
						<span>已过期结算订单</span>
					</a>
				</li>
			</ul>
		</div>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content">
			<!--数据列表-->
			<ul class="mui-table-view mui-table-view-chevron" id="jiesuan">
				<script type="text/html" id="model">
					{{if status=="success"}}
						{{each data as value i}}
						<li class="mui-table-view-cell" data-orderNum="{{value.out_order_no}}" data-authNo="{{value.auth_no}}">
							<img class="mui-media-object mui-pull-left logo" src="../images/{{value.pay_type}}.png" style="padding: 10px;">
							<div class="mui-media-body">
								<p><label>消费时间：</label>{{value.created_at}}</p>
								<p><label>消费账户：</label>{{value.payer_logon_id}}</p>
								<p><label>交易订单：</label>{{value.out_order_no}}</p>
								<p><label>预授权金额：</label><span style="color:red;">{{value.amount}}</span>元</p>
								<p><label>消费金额：</label>{{value.pay_amount}}元</p>
								<p class="mui-ellipsis"><label>备注信息：</label>{{(value.fu_remark ? value.fu_remark : "无备注信息")}}</p>
								<p><label>交易状态：</label>{{pay_status(value.pay_status)}}</p><span class="go_jiesuan">{{j_status(value.pay_status)}}</span></div>
						</li>
						{{/each}}
					{{/if}}
				</script>
			</ul>
		</div>
		<script type="text/javascript" src="../js/template-web.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					},
					up: {
						auto: true,
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var count = 1;
			function pullupRefresh() {
				require(weburl + model_fundAuthLists, "json", "post", {
					token: localStorage.getItem("token"),
					page: count++,
					number: 10
				}, function(response) {
					console.log(JSON.stringify(response));
					if(response.status == "error") {
						//参数为true代表没有更多数据了。
						mui('#pullrefresh').pullRefresh().endPullup(true);
						return false;
					}
					if(response.data.length < 10) {
						mui('#pullrefresh').pullRefresh().endPullup(true);
						upAddData(response);
						return false;
					}
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().endPullup(false); //参数为true代表没有更多数据了。
						upAddData(response);
					}, 1500);
				}, function() {

				})
			}
			mui("body").on("tap",".classify",function(){
				var that=$(this);
				if(that.hasClass("transformDown")){
					that.removeClass("transformDown");
					$(".bg").css("display","none");
				}else{
					that.addClass("transformDown");
					$(".bg").css("display","block");
				}
			})
			//交易状态
			template.defaults.imports.pay_status=function(num) {
				var sta = "";
				switch(num) {
					case 1:
						sta = "未结算";
						break;
					case 2:
						sta = "已取消";
						break;
					case 3:
						sta = "已交易中";
						break;
					case 4:
						sta = "已结算";
						break;
					case 5:
						sta = "已退回";
						break;
				}
				return sta;
			}
			//结算状态
			template.defaults.imports.j_status=function(num){
				if (num==1) {
					return "可结算";
				}
				return "";
			}
			function upAddData(resData) {
				console.log(JSON.stringify(resData));
				var str = template("model",resData);
				$("#jiesuan").append(str);
			}

			function downAddData(resData) {
				//清空记录
				$("#jiesuan").html("");
				var str = template("model",resData);
				$("#jiesuan").html(str);
			}
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				count = 1;
				require(weburl + model_fundAuthLists, "json", "post", {
					token: localStorage.getItem("token"),
					page: count++,
					number: 10
				}, function(response) {
					console.log(JSON.stringify(response));
					setTimeout(function() {
						downAddData(response);
						mui('#pullrefresh').pullRefresh().endPulldown();
					}, 1500);
				}, function() {

				})
			}
			
			//点击对应订单跳转至相应订单详情页
			mui("body").on("tap", "#jiesuan .mui-table-view-cell", function() {
				mui.openWindow({
					url: "depositDetail.html",
					id: "depositDetail.html",
					extras: {
						authNo: $(this).attr("data-authNo"),
						orderNum: $(this).attr("data-orderNum")
					}
				})
			})
			
			//点击可结算账单或者即将过期订单实现跳转
			mui("body").on("tap", ".function .mui-table-view-cell", function() {
				var that = $(this);
				mui.openWindow({
					url: that.attr("data-url"),
					id: that.attr("data-id"),
					extras: {
						pay_status: that.attr('data-pay-statys'),
						url_sign: "home",
						title: that.attr('data-title')
					}
				});
			})
		</script>
	</body>

</html>